import React, { useEffect, useMemo, useState } from "react";
import { NavLink, Link, Outlet } from "react-router-dom";
import { Layout, Menu, ConfigProvider } from "antd";
import routes from "@/router";
import styles from "./.module.less";

export default function IndexPage() {
  const items = useMemo(() => {
    return routes[0].children!.reduce((total, route: any) => {
      if (route.path) {
        total.push({
          key: route.path,
          label: <Link to={route.path}>{route.name || route.path}</Link>
        });
      }
      return total;
    }, [] as any[]);
  }, [routes]);

  return (
    <ConfigProvider prefixCls='lay'>
      <div className={styles.root}>
        <div className={styles.header}>
          <Menu
            mode='horizontal'
            defaultSelectedKeys={["2"]}
            items={items}
            style={{ flex: 1, minWidth: 0, lineHeight: "40px", borderBottom: 0, background: "#f5f5d5" }}
          />
        </div>
        <div className={styles.content}>
          <Outlet />
        </div>
      </div>
    </ConfigProvider>
  );
}
